<template>
	<view class="_tbody">
		<!-- 导航栏 -->
		<view v-show="show">
			<view class="nav-bar">
				<view class="nav-bar-wrap">
					<!--导航栏左边 -->
					<view class="nav-bar-wrap-left flex-c-c">
						<view class="nav-bar-wrap-left-icon">
							<u-icon name="arrow-leftward" size="24px" color="#fff" @tap="BackHome"></u-icon>
						</view>
						<view class="nav-bar-wrap-left-icon"><text>歌单</text></view>
					</view>
					<!-- 导航栏右边 -->
					<view class="nav-bar-wrap-right flex-c-c">
						<view class="nav-bar-wrap-left-icon">
							<u-icon name="search" size="24px" color="#fff" @click="showmsg"></u-icon>
						</view>
						<view class="nav-bar-wrap-left-icon">
							<u-icon name="more-dot-fill" size="24px" color="#fff"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 背景图 -->
			<view class="bg" :style="{ 'background-image': 'url(' + sonInstance.cover + ')' }"></view>

			<!-- 歌单名和头像等 -->
			<view class="info" @tap="openCover" data-types="group">
				<!-- 左边头像 -->
				<view class="info-left">
					<image :src="sonInstance.cover"></image>
				</view>
				<!-- 右边歌单名字和简介等 -->
				<view class="info-right">
					<view class="info-right-title">
						<text>{{ sonInstance.Tname }}</text>
						<!-- <u--text :text="sonInstance.Tname" lines="2" color="#fff"></u--text> -->
					</view>
					<view class="info-right-user" @tap.stop="userinfo">
						<image :src="sonInstance.uavatar" mode=""></image>
						<text>{{ sonInstance.uname }}</text>
					</view>
					<view class="info-right-brief">
						<text>{{ sonInstance.desc }}</text>
						<u-icon name="arrow-right" color="#fff"></u-icon>
					</view>
				</view>
			</view>

			<!-- 收藏/评论/分享 -->
			<view class="songs-more">
				<view class="songs-content">
					<view class="songs-left flex-c">
						<u-icon name="star" size="28px" color="#fff"></u-icon>
						<text>{{ sonInstance.share }}</text>
					</view>
					<!-- 评论 -->
					<view class="songs-center flex-c" color="#fff" @tap="commenton">
						<u-icon name="chat" size="28px"></u-icon>
						<text>{{ sonInstance.comment }}</text>
					</view>
					<view class="songs-right flex-c">
						<u-icon name="share" size="28px" color="#fff"></u-icon>
						<text>{{ sonInstance.subscribed }}</text>
					</view>
				</view>
			</view>

			<!-- 图标 -->
			<view class="play_icon">
				<view class="play_icon-left">
					<u-icon name="play-circle-fill" color="#fd393b" size="24px"></u-icon>
					<text class="play_icon-left-tit">播放全部({{ sonInstance.ids.length }})</text>
				</view>
				<view class="play_icon-right">
					<text>全选</text>
				</view>
			</view>
			<!-- 数据列表 -->
			<scroll-view scroll-y="true">
				<view class="play_list" v-for="(item, index) in songAll" :key="index">
					<view class="play_list-title" @tap="playMusic(item.id, index)">
						<view class="play_list-title-index">
							<text>{{ index + 1 }}</text>
						</view>
						<view class="play_list-title-txt">
							<text>{{ item.name }}</text>
							<view class="play_list-title-txt-user">
								<text>{{ item.ar[0].name }}-{{ item.al.name }}</text>
							</view>
						</view>
					</view>
					<view class="play_list-icons">
						<view>
							<u--image src="../../static/songs/mvs.png" v-if="item.mv !== 0" width="28px" height="28px" @tap="playmv(item)"></u--image>
						</view>
						<view>
							<u--image src="../../static/songs/more.png" width="28px" height="28px"></u--image>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" loadingText="玩命加载中..." />

				<!-- 歌单收藏 -->
				<view class="likes_user" v-if="shareShow">
					<view class="likes_avatar" v-for="(child, indec) in amateur.subscribers" :key="child.userId">
						<u-avatar :src="child.avatarUrl" size="30"></u-avatar>
					</view>
					<view class="likes_msg">
						<text>{{ amateur.total }}人收藏</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</scroll-view>

			<view class="play-assembly">
				<play></play>
			</view>
		</view>

		<!-- 模糊搜索 -->
		<view class="vague-seach" v-show="!show">
			<view class="vague-seach-top">
				<u-icon name="arrow-leftward" size="40rpx" @click="showmsg"></u-icon>
				<view class="vague-seach-top-input">
					<u--input @input="searchInput" placeholder="搜索歌单内歌曲" border="bottom" clearable v-model="keyword"></u--input>
				</view>
			</view>
			<view class="" v-show="vague">
				<view class="" v-for="(child, indexs) in searchInput(keyword)" :key="child.id">
					<text>{{ child }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import play from '@/components/plays.vue';
import { getDetailList, getSongList, playGdMusic, getSubscribers, PostSubscribe } from '@/http/songs.js';
import SongModel from '@/http/songs.js';
import moment from 'moment';
import utils from '@/utils/utils.js';
export default {
	name: 'SongDetails',
	components: {
		play
	},
	data() {
		return {
			list_id: '', //传过来的id
			mv: '', //mv
			currentpage: 1, //当前页数
			PageCount: 30, //每页条数
			show: true,
			phoneheight: '', //手机高度
			vague: false,
			keyword: '',
			amateur: [], //歌单收藏者
			actives: false,
			sonInstance: [],
			songAll: [],
			status: 'loadmore', //状态
			shareShow: false
		};
	},

	created() {
		this._getDetailList();
		this.Subscribers();
		// this.currentpage++
	},
	onLoad(o) {
		this.status = 'loading';
		console.log(this.status);
		this.list_id = o.id; //获取传过来的id
	},
	onReachBottom() {
		this._getDetailList();
	},
	methods: {
		// 回到首页
		BackHome() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					data: 1
				});
			} else {
				console.log('我打印了吗');
				uni.switchTab({ url: '/pages/index/index' });
			}
		},

		showmsg() {
			this.show = !this.show;
		},

		// 关键字搜索
		searchInput(keyword) {
			return this.songAll.filter((items) => {
				if (items.name || item.ar[0].name.includes(keyword)) {
					return items;
				}
			});
		},
		//进入有故事的评论区
		commenton() {
			uni.navigateTo({
				url: '/view/listcomments/listcomments?id=' + this.list_id
			});
		},
		//跳转到播放界面
		gotoPlay() {
			uni.navigateTo({
				url: '/view/Playmusic/Playmusic?id=' + this.list_id
			});
		},
		// 跳转到mv页面
		playmv(item) {
			uni.navigateTo({
				url: '/view/Mv/Mv?id=' + item.mv
			});
		},
		userinfo() {
			uni.navigateTo({
				url: '/view/UserInfo/UserInfo?id=' + this.sonInstance.uid
			});
		},

		//获取歌单信息
		async _getDetailList() {
			// 1. 进入加载状态
			this.status = 'loading';
			try {
				const { playlist: res } = await getDetailList(this.list_id);
				//保存请求到的数据，留着提交给提交到vuex
				// const musicAll= res
				this.sonInstance = new SongModel(res);
				console.log(this.sonInstance);
				uni.setStorageSync('songsData', res); // 保存在本地
				const idList = this.sonInstance.ids.map((item) => item.id);
				const totalSongs = idList.length; // 总歌曲数
				const loadedCount = this.songAll.length; // 已加载数量
				// 2. 判断是否已加载完所有数据
				if (loadedCount >= totalSongs) {
					this.status = 'nomore';
					this.shareShow = !this.shareShow;
					return;
				}

				// 3. 计算分页切割点
				const startIndex = (this.currentpage - 1) * this.PageCount;
				const endIndex = this.currentpage * this.PageCount;
				const currentPageIds = idList.slice(startIndex, endIndex);

				// 4. 请求歌曲详情
				const songs = await getSongList(currentPageIds);
				this.songAll = [...this.songAll, ...songs.songs];
				this.currentpage += 1;
				this.mv = songs.mv;

				// 5. 判断是否到达最后一页
				const isLastPage = this.songAll.length + currentPageIds.length >= totalSongs;
				this.status = isLastPage ? 'nomore' : 'loadmore';
			} catch (err) {
				// 6. 错误处理时也需解除loading
				this.status = 'nomore';
				console.error('加载失败:', err);
			}
		},
		async Subscribers() {
			const total = await getSubscribers(this.list_id);
			this.amateur = total;
		},

		// 点击播放
		playMusic(id, index) {
			uni.navigateTo({
				url: '/view/Playmusic/Playmusic?id=' + id
			});
			const mtLeng = this.sonInstance.lenght
			this.$store.dispatch('playIndex', index);
			this.$store.dispatch('playMusic', {
				list: this.songAll,
				index: index,
				listid: id
			});
		},

		// 打开封面图
		openCover() {
			uni.navigateTo({
				url: `/view/Cover/Cover`,
				success: (res) => {
					const datas = {
						cover: this.sonInstance.cover,
						name: this.sonInstance.Tname,
						tags: this.sonInstance.tag,
						desc: this.sonInstance.desc
					};
					res.eventChannel.emit('sendData', {
						list: datas
					});
				}
			});
		}
	},
	updated() {
		if (this.keyword !== '') {
			this.vague = true;
		} else {
			this.vague = false;
		}
	},

	// 过滤器
	filters: {
		count(v) {
			return v > 10000 ? (v / 10000).toFixed(1) + '万' : v;
		}
	}
};
</script>

<style lang="scss">
._tbody {
	font-family: STXihei;
	// background-color: #f6f6f6;
}

//手机导航高度
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}

//背景图片
.bg {
	z-index: -1;
	width: 100%;
	min-height: 530rpx;
	// height: 500rpx;
	position: absolute;
	top: 0;
	background-size: 100000px;
}

.nav-bar {
	// background-color: #fff;
	//导航栏
	&-wrap {
		width: 100vw;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-left,
		&-right {
			width: 200rpx;
			height: 100%;
			display: flex;

			&-icon {
				margin-left: 15px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
			}
		}

		&-center {
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #b6b6b6;
			// font-weight: 700;
		}
	}
}

// 歌单名字 简介等
.info {
	margin-top: 20px;
	display: flex;
	padding: 0 30rpx;
	height: 262rpx;
	color: #fff;

	.info-left {
		image {
			width: 250rpx;
			height: 250rpx;
			border-radius: 10px;
		}

		.info -count {
			width: 160rpx;
			border-radius: 15rpx;
			margin-left: 15rpx;
			opacity: 0.5;
			display: flex;
			position: relative;
			top: 50rpx;
			z-index: 2;
			background-color: #f6f6f6;
		}
	}
	.info-right {
		padding-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.info-right-title {
			font-size: 40rpx;
			font-weight: bold;
		}

		.info-right-user {
			display: flex;
			// justify-content: center;
			align-items: center;
			margin-top: 10rpx;
			image {
				width: 28px;
				height: 28px;
				justify-content: center;
				align-items: center;
				border-radius: 50px;
				margin-right: 10rpx;
			}
			text{
				font-size: 30rpx;
			}
		}

		.info-right-brief {
			width: 94%;
			height: 30px;
			display: flex;
			align-items: flex-end;
			font-size: 12px;

			text {
				flex: 1;
				width: 30px;
				height: 18px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}

// 歌单评论点赞等
.songs-more {
	margin: 25rpx 40rpx;

	.songs-content {
		display: flex;
		justify-content: space-between;
	}

	.flex-c {
		width: 200rpx;
		padding: 10rpx 0rpx;
		border-radius: 50rpx;
		background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background-color: rgba(239, 239, 239, 0.2);
		font-size: 30rpx;
	}
}

// 图标
.play_icon {
	display: flex;
	displaynav-bar: flex;
	justify-content: space-between;
	background-color: #fff;
	// padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 80rpx;

	&-left {
		display: flex;

		&-tit {
			padding-left: 15px;
			font-weight: bold;
			font-size: 16px;
		}
	}

	&-right {
		color: #a6a6a6;
		font-size: 12px;
	}
}

// 播放列表
.play_list {
	height: 100rpx;
	margin: 18px 15px;
	display: flex;
	justify-content: space-between;

	&-title {
		display: flex;
		align-items: center;
		flex: 8;
		margin-left: 15rpx;

		&-index {
			color: #909090;
			font-size: 30rpx;
			width: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
		}

		&-txt {
			margin-left: 50rpx;
			display: flex;
			flex-direction: column;
			width: 420rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			&-user {
				font-size: 12px;
				color: #a6a6a6;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		&-content {
			padding-left: 8px;
			display: flex;
			align-items: center;
		}
	}

	&-icons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 2;
	}
}

.vague-seach {
	width: 100%;
	margin: 30rpx 30rpx;

	z-index: 2;
	position: absolute;
	background-color: #fff;

	&-top {
		display: flex;
		width: 100%;

		&-input {
			flex: 1;
			margin-left: 15rpx;
		}
	}
}

.likes_user {
	display: flex;
	justify-content: space-between;
	margin: 30rpx;

	.likes_avatar {
		flex: 1;
	}

	.likes_msg {
		width: 35%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 35rpx;
	}
}

.play-assembly {
	position: fixed;
	/* bottom:var(--window-bottom + 30px); */
	bottom: 0;
	z-index: 2;
	width: 100%;
}

.bgc {
	border: 1px solid red;
	// background-size: 100000px;
	// position: absolute;
	// top: 0;
	// z-index: -1;
	height: 100vh;
	width: 100%;
}

//弹出层
.img {
	width: 500upx;
	height: 500upx;
	margin: 0 auto;
	margin-top: 200upx;

	image {
		width: 100%;
		border-radius: 20px;
		height: 100%;
	}
}

.prop-list {
	display: flex;
	justify-content: center;
	color: white;
	padding: 30upx 0;
}

// tip
.tip {
	color: white;
	display: flex;
	align-items: center;
	padding: 0 30upx;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;

	.tip-item {
		padding: 10upx 30upx;
		margin: 0 5upx;
		overflow: hidden;
		border-radius: 15px;
		box-sizing: border-box;
		font-size: 20upx;
		background: rgba(0, 0, 0, 0.1);
	}
}

//歌单介绍
.introduction {
	width: 100%;
	padding: 20upx 30upx;
	color: white;
	font-size: 20upx;
}

// 关闭按钮
.prop-close {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	right: 50upx;
	top: 100upx;
	border: 1px solid red;
}
</style>